<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link href="../js/layui/css/layui.css" rel="stylesheet" media="all">
		<link href="../css/common.css" rel="stylesheet" />
		<style>
			body {
				position: absolute;
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: #A0EEE1;
			}

			.title_area {
				margin: 0 auto;
				width: 100%;
				height: 30px;
				font-family: InfoFont;
				text-align: center;
				font-size: 30px;
				line-height: 30px;
				padding: 5px 0 0 0;
				background-color: #55aaff;
			}

			.count_down_area {
				margin: 0 auto;
				width: 100%;
				height: 50px;
				text-align: center;
				font-size: 40px;
				line-height: 50px;
				background-color: #55aaff;
			}

			.count_down_area .num {
				width: 50px;
				text-align: center;
				font-family: NumberFont;
			}

			.count_down_area .com {
				width: 5px;
				text-align: center;
				font-family: NumberFont;
			}

			.info_area {
				width: 100%;
				height: 180px;
				display: table;
				background: linear-gradient(to top,
						rgba(0, 0, 0, 0.6),
						rgba(0, 0, 0, 0.1) 3%,
						rgba(0, 0, 0, 0) 20%,
						rgba(0, 0, 0, 0) 80%,
						rgba(0, 0, 0, 0.1) 97%,
						rgba(0, 0, 0, 0.6));
			}

			.choice_area {
				padding: 0 3px;
				width: 100%;
				height: 120px;
				display: table;
				background: linear-gradient(to top,
						rgba(0, 0, 0, 0.6),
						rgba(0, 0, 0, 0.1) 3%,
						rgba(0, 0, 0, 0) 20%,
						rgba(0, 0, 0, 0) 80%,
						rgba(0, 0, 0, 0.1) 97%,
						rgba(0, 0, 0, 0.6));
			}

			.choices>div {
				font-size: 30px;
				margin: 3px 0;
			}

			input[type=checkbox] {
				width: 25px;
				height: 25px;
			}

			.info {
				text-align: center;
				font-family: InfoFont;
				font-size: 40px;
				line-height: 40px;
				word-break: break-word;
				display: table-cell;
				vertical-align: middle;
			}

			.button_area {
				width: 100%;
				text-align: center;
				position: fixed;
				bottom: 20px;
			}

			.button {
				max-width: 200px;
				width: 30%;
				height: 40px;
				font-family: InfoFont;
				#font-size: 20px;
				line-height: 44px;
			}

			.show {
				height: 100px;
				width: 100px;
				line-height: 22px;
			}
		</style>
		<script src="../js/layui/layui.all.js"></script>
	</head>

	<body>
		<div id="title_area" class="title_area">
			TOTAL: <span id="count">1</span>
		</div>
		<div id="count_down_area" class="count_down_area">
			<span class="num" id="hours">00</span>
			<span class="com">:</span>
			<span class="num" id="minutes">00</span>
			<span class="com">:</span>
			<span class="num" id="seconds">00</span>
			<span class="com">:</span>
			<span class="num" id="milliSeconds">00</span>
		</div>
		<div id="info_area" class="info_area">
			<div id="info" class="info"></div>
		</div>
		<div id="choice_area" class="choice_area">
			<div id="choices" class="choices">
			</div>
		</div>
		<div id="button_area" class="button_area">
			<button id="startButton" class="layui-btn layui-btn-radius layui-btn-normal button start"
				onclick="whenClick();">START</button>
			<button id="showButton" class="layui-btn layui-btn-radius button show" onclick="show();">NEXT</button>
			<button id="clearButton" class="layui-btn layui-btn-radius layui-btn-danger button clear"
				onclick="reset();">CLEAR</button>
		</div>
		<script src="../js/prepare.js"></script>
		<script type="text/javascript">
			var param = GetRequest(),
				questionData, errorMsg = '',
				name, title;
			if (param && param.n) {
				name = param.n;
				loadJS('../data/' + name + '.js', function() {
					document.title = title || param.t;
					$('#count').html(questions.length);
					//$('#count_down_area').html(title || param.t);
				});
			} else {
				errorMsg = '内容获取失败';
				layer.alert(errorMsg);
			}

			var $ = layui.jquery;
			var layer = layui.layer;
			var usedQuestions = [];

			var milliSeconds = $("#milliSeconds");
			var seconds = $("#seconds");
			var minutes = $("#minutes");
			var hours = $("#hours");
			var time = 0;
			var pre_time = 0;
			var intervals = 0;
			var pre_intervals = 0;
			var flag;
			var timeo;
			var inputValue = $("#startButton");
			var infoArea = $("#info");
			var showButton = $("#showButton");
			var choiceArea = $("#choices");
			var currAnswer = '';
			var rightCount = 0;

			function show() {
				if (inputValue.html() != "STOP") {
					return;
				}
				var checkedBoxes = $('input[type="checkbox"]:checked');
				if (usedQuestions.length > 0 && checkedBoxes.length < 1) {
					return;
				}
				var ANSWER = '';
				checkedBoxes.each(function() {
					ANSWER += $(this).val();
				});
				console.log(ANSWER);
				if (usedQuestions.length > 0) {
					if (currAnswer == ANSWER) {
						rightCount ++;
						console.log('正确');
					} else {
						alert('回答错误！\r\n正确答案为：' + currAnswer);
					}
				}
				if (questions.length == usedQuestions.length) {
					infoArea.html('<font style="color: red;">DONE!</font>');
					stop();
				} else {
					var length = questions.length;
					c = questions[Math.floor(Math.random() * length)];
					var key = c.q;
					while (usedQuestions.indexOf(key) != -1) {
						c = questions[Math.floor(Math.random() * length)];
						key = c.q;
					}
					usedQuestions.push(key);
					infoArea.html(c.q);
					var choice_html = '';
					$.each(c.c, function(k, v) {
						if (v) {
							choice_html += '<div><input id="choice_' + k + '" class="choice ' + k +
								'" type="checkbox" value="' + k + '"/><label for="choice_' + k + '">' + k + '. ' + v +
								'</label></div>';
						}
					});
					choiceArea.html(choice_html);
					currAnswer = c.a.join('');
					var used_length = usedQuestions.length;
					if (used_length < length) {
						showButton.html('<br>NEXT<br>(' + usedQuestions.length + '/' + length + ')');
					} else {
						showButton.html('TAP<br>TO<br>FINISH');
					}
				}
			}

			function whenClick() { //  开始/暂停
				if (inputValue.html() == "START" || inputValue.html() == "CONTINUE") {
					reset();
					inputValue.html("READY");
					infoArea.html('<font style="color: red;">3</font>');
					timeo = setTimeout(function() {
						infoArea.html('<font style="color: red;">2</font>');
						timeo = setTimeout(function() {
							infoArea.html('<font style="color: red;">1</font>');
							timeo = setTimeout(function() {
								infoArea.html('<font style="color: red;">GO!</font>');
								timeo = setTimeout(function() {
									start();
								}, 500);
							}, 500);
						}, 500);
					}, 500);
				} else if (inputValue.html() == "READY") {
					return;
				} else {
					// inputValue.val()="CONTINUE";
					inputValue.html("START");
					stop();
				}
			}

			function reset() { //  清零
				stop();
				milliSeconds.html("00");
				seconds.html("00");
				minutes.html("00");
				hours.html("00");;
				time = 0;
				pre_time = 0;
				intervals = 0;
				pre_intervals = 0;
				infoArea.html('');
			}

			function start() { //  开始/继续
				infoArea.html('');
				var date = new Date();
				time = date.getTime();
				pre_time = time;
				inputValue.html("STOP");
				show();
				flag = setInterval("timeIncrement();", 10);
			}

			function timeIncrement() {
				date = new Date();
				intervals = date.getTime() - time + pre_intervals;
				var a = intervals % 1000 / 10;
				var b = intervals % 60000 / 1000;
				var c = intervals % 3600000 / 60000;
				var d = intervals / 3600000;
				milliSeconds.html((a < 10) ? ('0' + Math.floor(a)) : (Math.floor(a)));
				seconds.html((b < 10) ? ('0' + Math.floor(b)) : (Math.floor(b)));
				minutes.html((c < 10) ? ('0' + Math.floor(c)) : (Math.floor(c)));
				hours.html((d < 10) ? ('0' + Math.floor(d)) : (Math.floor(d)));
			}

			function stop() { //  暂停/停止
				inputValue.html("START");
				showButton.html('NEXT');
				date = new Date();
				pre_intervals += date.getTime() - pre_time;
				clearInterval(flag);
				clearTimeout(timeo);
				if (usedQuestions.length > 0) {
					layer.alert('题目回答完毕！<br>总共' + questions.length + '题<br>正确' + rightCount + '题');
				}
				usedQuestions = [];
				choiceArea.html('');
				rightCount = 0;
			}
		</script>
	</body>

</html>